'use strict';
import React from "react";
import {
    View,
    ScrollView,
    Text,
    Image,
    Animated,
    StyleSheet,
    ListView,
    ActivityIndicator,
    InteractionManager
} from "react-native";
import ToolBar from "../Components/ToolBar";
import BottomInputText from "../Components/BottomInputText";
import FoundDetailsListView from "../Components/FoundDetailsListView";
import BottomShareView from "../Components/BottomShareView";
import Global from "../Commom/GlobalConst";
import FoundAPIService from "../Commom/FoundAPIService";
import RegisteredContainer from '../Containers/RegisteredContainer';
import Toast from "../Utils/toast";
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    avatarBox: {
        padding: 10,
        borderColor: '#F2F3F5',
        borderTopWidth: 10,
        borderBottomWidth: 1,
    },
    avatarTitle: {
        fontSize: 16,
        marginLeft: 5,
        color: Global.FontColor.DimGray,
    },
    avatarImg: {
        width: 40,
        height: 40,
        marginRight: 15,
        borderRadius: 20,
    },
    rowBox: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 15,
    },
    textBtn: {
        marginTop: 5,
        textAlign: 'center',
        width: 80,
        padding: 5,
        fontSize: 18,
        backgroundColor: '#F9B552',
        borderRadius: 5,
        color: 'white'
    },
    imageRowBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 10,
        flexWrap: 'wrap',
    },
    subtitleBox: {
        marginRight: 10,
        color: Global.FontColor.LightGrey,
        fontSize: 15,
    }
});

/**
 * 游记详情
 */
class TravelsDetails extends React.Component {

    constructor(props) {
        super(props);
        var travelImageData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            travelImageDataSource: travelImageData,
            commentList: [],
            paddingBottom: new Animated.Value(0),
            travelDetailsData: {},
            flag: false,
        }
    }

    _KeyboardDidShow(height) {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: height,
                duration: 50,
            }
        ).start();
    }

    componentDidMount() {
        let id = this.props.ID;
        InteractionManager.runAfterInteractions(() => {
            FoundAPIService.travelDetails(id).then((ret)=> {
                this.setState({
                    travelDetailsData: ret,
                    travelImageDataSource: this.state.travelImageDataSource.cloneWithRows(ret.images ? ret.images : []),
                    commentList: ret.commemt_list,
                    flag: true,
                });
            }).catch((err)=> {
                Toast.show('===');
            });
        });
    }

    refreshComments() {
        let id = this.props.ID;
        FoundAPIService.travelDetails(id).then((ret)=> {
            this.setState({
                commentList: ret.commemt_list,
            });
        }).catch((err)=> {
        });
    }

    _KeyboardDidHide() {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: 0,
                duration: 50,
            }
        ).start();
    }
    goLoginPage(){
        this.props.navigator.push({
            id: 'RegisteredContainer',
            component: RegisteredContainer,
            passProps: {},
        });
    }
    travelImageListRow(rowData) {
        return (
            <View style={{width:Global.Const.size.width-20,justifyContent:'center',alignItems:'center'}}>
                <Image
                    style={{width:Global.Const.size.width-40,height:200,marginTop:5,marginBottom:1}}
                    source={{uri: rowData}}></Image>
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                {
                    this.state.flag ?
                        <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                            <ToolBar leftFunc={()=> {
                    this.props.navigator.pop();
                }} title="游记" rightFunc={()=> {
                    this.shareView.showShareView();
                }}/>
                            <ScrollView style={styles.container}>
                                <View style={styles.avatarBox}>
                                    <Text style={styles.avatarTitle}>{this.state.travelDetailsData.title}</Text>
                                    <View style={styles.rowBox}>
                                        <Image style={styles.avatarImg}
                                               source={{uri: this.state.travelDetailsData.avatar}}/>
                                        <Text numberOfLines={1}
                                              style={styles.subtitleBox}>{this.state.travelDetailsData.user_name}</Text>
                                        <Text numberOfLines={1}
                                              style={{position: 'absolute',right:5,bottom:10,fontSize:15}}>{this.state.travelDetailsData.add_time}</Text>
                                    </View>
                                </View>
                                <View style={{padding:10}}>
                                    <Text>{'     ' + this.state.travelDetailsData.content}</Text>
                                    <ListView
                                        styte={{marginTop:10}}
                                        enableEmptySections={true}
                                        dataSource={this.state.travelImageDataSource}
                                        renderRow={this.travelImageListRow.bind(this)}/>
                                </View>
                                {this.state.commentList.length > 0 ?
                                    <View style={{flexDirection: 'row',alignItems: 'center',margin:10,marginTop:20,padding: 10,paddingLeft: 15, backgroundColor: 'white',borderColor: '#F2F3F5',borderBottomWidth: 1,
                        }}>
                                        <Image style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                               source={require('../../Image/icon_gray_comment.png')}
                                        />
                                        <Text style={{color: '#333', fontSize: 16}}>点评</Text>
                                    </View>
                                    : null}
                                {this.state.commentList.length > 0 ?
                                    <FoundDetailsListView commentList={this.state.commentList}/>
                                    : null}
                            </ScrollView>
                            <BottomInputText
                                keyboardDidHide={() => this._KeyboardDidHide()}
                                keyboardDidShow={(height) => this._KeyboardDidShow(height)}
                                id={this.props.ID}
                                goLoginPage={()=>this.goLoginPage()}
                                refreshComments={() =>this.refreshComments()}
                            />
                            <BottomShareView
                                shareTitle={ this.state.travelDetailsData.user_name}
                                shareContent={this.state.travelDetailsData.content}
                                shareImageUrl={this.state.travelDetailsData.avatar}
                                shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                                ref={(ref) => {this.shareView = ref;}}/>
                        </Animated.View>
                        :
                        <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                            style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                            <View
                                style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                                <ActivityIndicator
                                    animating={this.state.animating}
                                    style={{ alignItems: 'center',justifyContent: 'center'}}
                                    size="large"/>
                                <Text style={{color:'white'}}>加载中...</Text>
                            </View>
                        </View>
                        </View>
                }
            </View>
        )
    }
}

export default TravelsDetails;